<template>
  <el-card class="common_card_wrapper">
    <el-table
      :data="tableData"
      :border="true"
      height="800px"
      v-loading="loading"
      element-loading-text="加载中..."
    >
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column
        prop="skuName"
        label="名称"
        width="400"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="skuDesc"
        label="描述"
        width="600"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="weight" label="重量(g)" width="200" />
      <el-table-column prop="price" label="价格(元)" width="200" />
      <el-table-column prop="skuDefaultImg" label="默认图片" width="300">
        <template #default="{ row }">
          <img :src="row.skuDefaultImg" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作" fixed="right" width="250">
        <template #default="{ row }">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="row.isSale ? '上架' : '下架'"
            placement="bottom"
          >
            <el-button
              v-if="row.isSale"
              type="success"
              icon="top"
              @click="onSaleSku(row)"
            ></el-button>
            <el-button
              v-else
              type="info"
              icon="bottom"
              @click="onCancelSaleSku(row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            placement="bottom"
          >
            <el-button type="primary" icon="edit"></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="详情"
            placement="bottom"
          >
            <el-button
              type="info"
              icon="InfoFilled"
              @click="checkSkuInfo(row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="删除"
            placement="bottom"
          >
            <el-button
              type="danger"
              icon="delete"
              @click="deleteRow(row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="common_pagination"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[30, 50, 100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout=" prev, pager, next, jumper,->,total, sizes"
      :total="total"
      @size-change="sizeChange"
      @current-change="getSku"
    />
    <!-- 商品详情 -->
    <Drawer
      :visible="drawerVisible"
      :title="drawerTitle"
      :width="drawerWidth"
      :modal="drawerModal"
      @close="closeDrawer"
    >
      <template #drawer-content>
        <el-row>
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{ skuInfo.skuName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">价格</el-col>
          <el-col :span="18">{{ skuInfo.price }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-space wrap>
              <el-tag
                v-for="o in skuInfo.skuAttrValueList"
                :key="o.id"
                type="primary"
              >
                {{ o.valueName }}
              </el-tag>
            </el-space>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-space wrap>
              <el-tag
                v-for="o in skuInfo.skuSaleAttrValueList"
                :key="o.id"
                type="success"
              >
                {{ o.saleAttrValueName }}
              </el-tag>
            </el-space>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <el-carousel :interval="3000" type="card" height="350px">
              <el-carousel-item v-for="o in skuInfo.skuImageList" :key="o.id">
                <img :src="o.imgUrl" alt="" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </template>
      <template #drawer-footer>
        <el-space wrap>
          <el-button @click="closeDrawer">取消</el-button>
        </el-space>
      </template>
    </Drawer>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  reqSKuList,
  delSkuReq,
  saleSku,
  cancelSaleSku,
  reqSkuInfo
} from '@/api/product/sku'
import '@/styles/common/index.less'

onMounted(() => {
  getSku()
})

const currentPage = ref(1)
const pageSize = ref(30)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
let total = ref(0)
let tableData = reactive<any>([])
let loading = ref(false)
let drawerVisible = ref(false)
let drawerTitle = ref('商品详情')
let drawerWidth = ref(800)
let drawerModal = ref(true)
let skuInfo = ref<any>({})

// 获取list列表
const getSku = async (pager = 1) => {
  currentPage.value = pager
  loading.value = true
  let res: any = await reqSKuList(currentPage.value, pageSize.value)
  if (res.code === 200) {
    tableData = res.data.records
    total.value = res.data.total
    loading.value = false
  } else {
    ElMessage.error(res.message)
    loading.value = false
  }
}
// 分页器 自定义条数方法
const sizeChange = () => {
  getSku()
}

// 上架
const onSaleSku = async (data: any) => {
  let res: any = await saleSku(data.id)
  if (res.code === 200) {
    data.isSale = 0
    ElMessage.success('上架成功')
  } else {
    ElMessage.error(res.data ? res.data : res.message)
  }
}

// 下架
const onCancelSaleSku = async (data: any) => {
  let res: any = await cancelSaleSku(data.id)
  if (res.code === 200) {
    data.isSale = 1
    ElMessage.success('下架成功')
  } else {
    ElMessage.error(res.data ? res.data : res.message)
  }
}

// 查看SKU详情
const checkSkuInfo = async (data: any) => {
  let res: any = await reqSkuInfo(data.id)
  if (res.code === 200) {
    skuInfo.value = res.data
  } else {
    ElMessage.error(res.data ? res.data : res.message)
  }
  drawerVisible.value = true
}

// 删除方法
const deleteSkuMethod = async (id: any) => {
  let res: any = await delSkuReq(id)
  if (res.code === 200) {
    ElMessage.success(res.message)
    getSku(tableData.length > 1 ? currentPage.value : currentPage.value - 1)
  } else {
    ElMessage.error(res.data ? res.data : res.message)
  }
}

// 删除
const deleteRow = (row: any) => {
  ElMessageBox.confirm(`确定删除${row.skuName}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteSkuMethod(row.id)
  })
}

// drawer 回调
const closeDrawer = (value: boolean) => {
  drawerVisible.value = false
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-carousel__item img {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

img {
  width: 100%;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
